<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"></link>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
</head>
<body>


    <div class="container" id="app">
        <div class="row">
            <input type="text" v-model="emp.ename">
        </div>
        <table class="table table-hover">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>职位</td>
            </tr>
            <tr v-for="e in emps">
                <td v-text="e.eid"></td>
                <td v-text="e.ename"></td>
                <td v-text="e.job"></td>
            </tr>
        </table>
        <!--分页-->
        <!--显示分页信息-->
        <div class="row">
            <!--文字信息-->
            <div class="col-md-6">
                当前第 <input name="startPage"  :value="pageInfo.pageNum"  style="width: 20px"/>/{{pageInfo.pages}}页.一共 {{pageInfo.total}}条记录
            </div>
            <!--点击分页-->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li><a href="javascript:;" @click="query(1)">首页</a></li>
                        <!--上一页-->
                        <li>
                            <a :class="{'hidden':!pageInfo.hasPreviousPage}" href="javascript:;" @click="query(pageInfo.pageNum-1)" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                        <li v-for="page_num in pageInfo.navigatepageNums"   :class="{'active':page_num == pageInfo.pageNum}" >
                            <a href="javascript:;"   :class="{'hidden':page_num == pageInfo.pageNum}" @click="query(page_num)">{{page_num}}</a>
                            <a :class="{'hidden':page_num != pageInfo.pageNum}" href="javascript:;" @click="query(page_num)"  >{{page_num}}</a>
                        </li>
                        <!--下一页-->
                        <li>
                            <a :class="{'hidden':!pageInfo.hasNextPage}" href="javascript:;" @click="query(pageInfo.pageNum+1)"
                               aria-label="Next" >
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                        <li><a href="javascript:;" @click="query(pageInfo.pages-0)">尾页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!--分页结束-->
    </div>


    <script>
        $(function(){
            $.getJSON("/Emp/query",{},function(json){
                app.emps=json.data.list;
                app.pageInfo=json.data.pageInfo;
            });
        });
        var app=new Vue({
            el:"#app",
            data:{
                emps:'',
                pageInfo:'',
                emp:{
                    ename:''
                }
            },methods:{
                query(pageNum){
                    this.pageInfo.pageNum=pageNum;
                    $.getJSON("/Emp/query",{"pageNum":pageNum},function(json){
                        app.emps=json.data.list;
                        app.pageInfo=json.data.pageInfo;
                    });
                }
            }
        });
    </script>
</body>
</html>